{extend name="index/index"}

{block name="body"}
<div class="login-container" data-supersized="__ROOT__/static/theme/img/login/bg1.jpg,__ROOT__/static/theme/img/login/bg2.jpg">
    <div class="header notselect layui-hide-xs">
        <a href="{:url('@')}" class="title">MubinAdmin<span class="padding-left-5 font-s10">6.0</span></a>
        {notempty name='devMode'}
        <a class="pull-right layui-anim layui-anim-fadein" href='https://gitee.com/zoujingli/ThinkAdmin'>
            <img src='https://gitee.com/zoujingli/ThinkAdmin/widgets/widget_1.svg' alt='Fork me on Gitee'>
        </a>
        {/notempty}
    </div>
    <form data-login-form onsubmit="return false" action = "{:url('login/login')}" method="post" class="layui-anim layui-anim-upbit form" autocomplete="off">
        <h2 class="notselect">系统管理</h2>
        <ul>
            <li class="username">
                <label>
                    <i class="layui-icon layui-icon-username"></i>
                    <input class="layui-input" required pattern="^\S{4,}$" name="username" autofocus autocomplete="off" placeholder="请输入账号">
                </label>
            </li>
            <li class="password">
                <label>
                    <i class="layui-icon layui-icon-password"></i>
                    <input class="layui-input" required pattern="^\S{4,}$" name="password" maxlength="32" type="password" autocomplete="off" placeholder="请输入密码">
                </label>
            </li>
            <li class="remeber">
                <label for="remeber">
                    <input type="checkbox" id="remeber" name="remeber" value="1" style="height: 16px;box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset !important;vertical-align: text-bottom;" />
                    <span style="color: #fff !important;">记往我</span>
                </label>
                <a class="forget" href="javascript:void(0);" style="color:white;position: absolute;right: 0px;">忘记密码?</a>
            </li>
            <li class="text-center">
                <input type="hidden" name="skey" value="{$loginskey|default=''}">
                <button lay-submit="" lay-filter="submit" class="layui-btn layui-disabled full-width" data-form-loaded="立即登入">正在载入</button>
            </li>
        </ul>
    </form>
    <div class="footer notselect">
        <p class="layui-hide-xs"><a target="_blank" href="https://www.google.cn/chrome">推荐使用谷歌浏览器</a></p>
    </div>
</div>
{/block}

{block name='style'}
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<script>if (location.href.indexOf('#') > -1) location.replace(location.href.split('#')[0])</script>
<link rel="stylesheet" href="__ROOT__/static/theme/css/login.css">
{/block}

{block name='script'}
<script src="__ROOT__/static/plugs/supersized/supersized.3.2.7.min.js"></script>
<script type="text/javascript">
    layui.use(['jquery', 'layer', 'form'], function () {
        //忘记密码
        layui.$(".forget").on('click', function () {
            layui.layer.msg('请联系管理员重置密码!', {offset: 'auto', shift: 0});
        });
        //登陆提交
        layui.form.on('submit(submit)', function () {
            var username = layui.$("input[name='username']").val(),
                password = layui.$("input[name='password']").val();
            if (!username || !password) {
                tips('帐号或密码不能为空哦', 0);
                return false;
            }
            ajaxSubmit();
            return false;
        });

        //统一提交
        function ajaxSubmit() {
            var form = layui.$("form");
            layui.$.post(form.attr("action"), form.serialize(), function (data) {                
                tips(data.msg, data.code);
                if (data.code == 0) {
                    layui.$("#button").prop('disabled', false);
                    return false;
                }
                setTimeout(function () {
                    window.location.href = data.url;
                }, 1300);
            });
        }
        //提示
        function tips(text, icon) {
            text = text || '提交成功，系统未返回信息';
            icon = icon || 2;
            layui.layer.msg(text, {
                icon: icon,
                offset: 'auto',
                shift: 0
            });
        }

        //效果
        layui.$(document).ajaxSend(function () {
            loading = layui.layer.load(2);
            layui.$("#button").prop('disabled', true);
        }).ajaxStop(function () {
            layui.layer.close(loading);
        });
    });
</script>
{/block}